<?php
    echo $this->Html->script('users.js');
    echo $this->Html->css('estilo_users.css');
?> 
<div class="container">
    <div class="contenedor-tabla">
        <h3 class="titulo-form">USUARIOS</h3>
        <button class="btn btn-success agregar-modal" type="button" data-toggle="modal">
            Agregar Usuario
        </button>
        <div class="dos-botones">
            <div id="seleccion">Seleccione un registro</div>
            <button class="btn btn-small btn-primary modificar-modal" disabled="disabled">
                Modificar
            </button>
            <button class="btn btn-small btn-danger eliminar-modal" disabled="disabled">
                Eliminar
            </button>
        </div>
        <table class="table table-striped" id="tabla-principal">
            <thead>
                <tr>
                    <th class="header-id">id</th>
                    <th class="header-nombre">Nombre</th>
                    <th class="header-user">Usuario</th>
                    <th class="header-correo">Correo</th>
                    <th class="header-tipo">Tipo</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($todos as $t) { ?>
                    <tr>
                        <td class="id-tabla"><?php echo $t['id']; ?></td>
                        <td class="nombre-tabla"><?php echo $t['nombre']; ?></td>
                        <td class="user-tabla"><?php echo $t['usuario']; ?> </td>
                        <td class="correo-tabla"><?php echo $t['correo']; ?> </td>
                        <td class="tipo-tabla"><?php echo $t['tipo']; ?></td>
                    </tr>
                <?php } ?>
            </tbody>
            <tfoot>
		<tr>
                    <th>Todos</th>
                    <th>Todos</th>
                    <th>Todos</th>
                    <th>Todos</th>
                    <th>Todos</th>
		</tr>
            </tfoot>
        </table>
    </div>
    <div id="dlg-modal" class="dialogo-modal">
        <h3 class="titulo-modal"></h3>
        <div id='contenido'></div>
    </div>
    <div id="contenido-forma">
        <form id="forma-modal">
            <div class="control-group">
                <label class="control-label" for="dlg-id">Id:</label>
                <input class="control-forma" id="dlg-id" type="text" name="id" readonly="true"> 
            </div>
            <div class="control-group">
                <label class="control-label" for="dlg-nombre">Nombre:</label>
                <input class="control-forma" id="dlg-nombre" type="text" name="nombre"> 
            </div>
            <div class="control-group">
                <label class="control-label" for="dlg-usuario">Usuario:</label>
                <input class="control-forma" id="dlg-usuario" type="text" name="usuario"> 
            </div>
            <div class="control-group">
                <label class="control-label" for="dlg-correo">Correo:</label>
                <input class="control-forma" id="dlg-correo" type="text" name="correo"> 
            </div>
            <div class="dropdown drop-tipo">
                <label class="control-label" for="titulo-tipo">Tipo</label>
                <a class="btn btn-dark dropdown-toggle" data-toggle="dropdown" href="#" id="titulo-tipo" onclick="return false;"></a>
                <input class="oculto" name="tipoinput" id="tipoinput">                    
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="dlg-tipo">
                    <li><a tabindex="-1" href="javascript:void(0);" class="drop-opcion-tipo">master</a></li>
                    <li><a tabindex="-1" href="javascript:void(0);" class="drop-opcion-tipo">admin_fab</a></li>
                    <li><a tabindex="-1" href="javascript:void(0);" class="drop-opcion-tipo">admin_tien</a></li>
                    <li><a tabindex="-1" href="javascript:void(0);" class="drop-opcion-tipo">supervisor</a></li>
                    <li><a tabindex="-1" href="javascript:void(0);" class="drop-opcion-tipo">vendedor</a></li>
                    <li><a tabindex="-1" href="javascript:void(0);" class="drop-opcion-tipo">practicante</a></li>
                </ul>
            </div>
            <div class="control-group botones-modal">
                <div class="btn btn-success aceptar-modal validar-usuario"></div>
                <div class="btn btn-danger cancelar-modal"></div>
            </div>
        </form>
        <div id="confirmar-cambios-modal">
            <div id="borde-int-confirmar">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var rutaModificar = "<?php echo $this->Html->Url(array('controller' => 'Users', 'action' => 'modificarUsuario')); ?>";
    var rutaEliminar = "<?php echo $this->Html->Url(array('controller' => 'Users', 'action' => 'eliminarUsuario')); ?>";
    var rutaObtenerFecha = "<?php echo $this->Html->Url(array('controller' => 'Users', 'action' => 'obtenFecha')); ?>";
    var rutaAgregar = "<?php echo $this->Html->Url(array('controller' => 'Users', 'action' => 'agregarUsuario')); ?>";
    var consultaCliente = "<?php echo $this->Html->Url(array('controller' => 'Users', 'action' => 'consultaUsuario')); ?>";
    var todos = <?php echo json_encode($todos); ?>;
    var dialogo = $(document).find('#dialogo-modal');
    var id, arreglo, itabla, activo, tabla;
</script>
